<template>
  <contentModel
    v-if="detailShow"
    :title="title"
    :has-footer="false"
    @close="handleClose"
  >
    <standard-table
      v-model:selectedKeys="selectedKeys"
      :component-config="tableComponentConfig"
      :render-config="tableRenderConfig"
      :render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="total"
      @page-change="changePage"
      @page-size-change="changePage"
    >
      <!-- <template #index="{ rowIndex }">
        <div>{{ rowIndex + 1 }}</div>
      </template> -->
      <!-- <template #ordChngType>
        <span>{{ 'U' }}</span>
      </template> -->
    </standard-table>
  </contentModel>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, defineAsyncComponent } from 'vue';
  import standardTable from '@/common/components/standard-table/index.vue';
  // import { getTaskPage } from '@/api/balance-management/purchase';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-order/components/tableComp/baseTableConfigAlterationAdministration';
  import { getDetailPage } from '@/api/purchase-order/orderApi';
  // import { baseRenderKeys } from './baseRenderData';

  const title = ref();
  defineProps({
    detailShow: { type: Boolean, default: false },
  });
  const emit = defineEmits(['update:detailShow']);
  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const handleClose = () => {
    emit('update:detailShow', false);
  };
  const tableRenderKeys = [
    'index',
    'secretLevel',
    'orderChangeType',
    'pmsOrderLNo',
    'mdsItemCodeNew',
    'mdsItemNameNew',
    'marque',
    'specs',
    'techCondition',
    'invOrdQty',
    'invOrdQtyNew',
    'planArrivalDateTime',
    'planArrivalDateTimeNew',
    'notes',
    'changeReason',
    'dlvrtDkAftModlsNew',
    'dlvrtDkAftDrwnoNew',
  ];

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);
  const total = ref(0);
  const changePage = (val) => {
    console.log(page.value, val);
    Object.assign(page.value, val);
    init(pmsId.value);
  };
  const page = ref({
    pageNo: 1,
    pageSize: 10,
  });
  const pmsId = ref('');
  const init = async (val) => {
    console.log(val, 'val');

    isLoading.value = true;
    pmsId.value = val;
    try {
      const res = await getDetailPage({
        pmsOrderInfoChangeId: val,
        ...page.value,
      });
      if (res.code === 200) {
        total.value = res.data.total;
        renderData.value = res.data.list;
      }
    } finally {
      isLoading.value = false;
    }
  };
  defineExpose({ init, title });
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
